<!--
 * @Descripttion: 上传图片
 * @version: 
 * @Author:Hui
 * @Date: 2023-05-08 16:37:16
 * @LastEditTime: 2023-11-21 21:30:12
 * @LastEditors: sueRimn
-->

<template>
  <view class="d-flex align-items-center">
    <view class="box">
      <image
        v-if="url"
        :src="url"
        mode="aspectFill"
        class="image"
      />
      <view
        v-else
        class="uploadIcon bg-default"
        @click="handleChooseImage"
      />
    </view>
    

    <view class="tips">
      <view class="text">如果遇到功能异常，</view>
      <view class="text">上传页面截图可以更快解决哦！</view>
    </view>
  </view>
</template>


<script>
import { BASEHOST, platform, partnerId } from '@/config'
import { parseTime } from '@/utils'


export default {
  name: 'uploadImage',
  props: {
    url: { type: String },
  },
  data() {
    return {

    }
  },


  methods: {
    // 上传图片
    uploadImage(filePath) {
      uni.showLoading({ title: '图片上传中。。。', mask: true })
      uni.uploadFile({
        url: ``,
        filePath,
        name: 'file',
        header: {
          'wzw-client-type': platform,
          'wzw-os-type': 'windows',
          'wzw-access-token': getApp().globalData.token,
          'partnerId': partnerId,
        },
        fileType: 'image',
        formData: {
          'folderPath': `userFeedback/${parseTime(new Date(), '{y}{m}{d}')}`,
        },
        success: result => {
          const res = JSON.parse(result.data)
          if (res.code === 200 && res.data) {
            this.$emit('uploadImageSuccess', res.data)
          }
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

    // 选择图片
    handleChooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: res => {
          this.uploadImage(res.tempFilePaths[0])
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0;
}
.uploadIcon{
  width: 120rpx;
  height: 120rpx;
  background-image: url(@/static/images/icon/xiangji.png);
  background-size: 100%;
}

.image{
  width: 120rpx;
  height: 120rpx;
  display: block;
}

.tips{
  padding-left: 34rpx;
  .text{
    font-size: 24rpx;
    color: #999;
    line-height: 34rpx;
  }
}
</style>